.doc {
  width: calc(100% - 15px);
  height: 100%;
  background: #fff;

  .doc-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 164px);
    margin-right: 20px;
    padding: 10px 0 20px;
    overflow-y: auto;
    font-size: 16px;
    .doc-box {
      width: 100%;
      padding: 5px 0 0px;
      .doc-list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        padding: 5px 5% 5px;
        .doc-list-hd {
          width: 60px;
          .problem-avatar,
          .answer-avatar {
            width: 34px;
            height: 34px;
            vertical-align: middle;
          }
        }
        .doc-list-bd {
          flex: 1;
          .problem-con {
            display: inline-block;
            box-sizing: border-box;
            width: auto;
            padding: 10px 20px;
            color: #333;
            font-size: 14px;
            background-color: #d6e1f9;
            border-radius: 0px 8px 8px 8px;
          }
          // @keyframes typing {
          //   from {
          //     width: 0;
          //   }
          // }
          // @keyframes caret {
          //   50% {
          //     border-right-color: #000;
          //   }
          // }
          // p {
          //   width: 1px;
          //   height: 16px;
          //   overflow: hidden;
          //   white-space: nowrap;
          //   border-right: 1px solid transparent;
          //   animation: caret 0.8s steps(1) infinite; //执行typing动画，在0.5s内执行完毕，分1段执行，循环执行
          // }

          .answer-con {
            box-sizing: border-box;
            // display: flex;
            // flex-direction: row;
            // align-items: flex-end;
            width: fit-content;
            // width: 100%;
            padding: 10px 20px;
            color: #333;
            font-size: 14px;
            line-height: 25px;
            white-space: pre-wrap;
            background-color: #f8f8fa;
            border-radius: 0px 8px 8px 8px;
            strong {
              display: block;
              margin-top: 10px;
              margin-bottom: 10px;
              color: #05073b;
              font-weight: 600;
              font-size: 26px;
              font-family: PingFangSC-Semibold;
              line-height: 36px;
              letter-spacing: 0;
            }
            .robot-info {
              margin-top: 5px;
              margin-bottom: 5px;
              color: #676c90;
              font-weight: 400;
              font-size: 14px;
              font-family: PingFangSC-Regular;
              line-height: 26px;
              letter-spacing: 0;
              text-align: justify;
            }
            .fast-problem-box {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-start;
              margin-top: 20px;
              .fast-problem-list {
                position: relative;
                box-sizing: border-box;
                width: 48%;
                min-height: 70px;
                margin-right: 9px;
                margin-bottom: 9px;
                padding: 10px 10px;
                background: #fff;
                border: 1px solid #fff;
                border-radius: 4px;
                .expect {
                  position: absolute;
                  top: 5px;
                  right: 5px;
                  display: inline-block;
                  padding: 0px 6px;
                  color: #4a79f6;
                  font-size: 12px;
                  background-color: #dde8ff;
                  border-radius: 4px;
                }
                .fast-problem-hd {
                  position: relative;
                  width: 100%;
                  //超出省略号
                  overflow: hidden;
                  color: #333333;
                  font-weight: 500;
                  font-size: 15px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .fast-problem-bd {
                  width: 100%;
                  //超出省略号
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                // active 鼠标移入
                &.hover {
                  cursor: pointer;
                  &:hover {
                    color: #4a79f6;
                    border: 1px solid #4a79f6;
                    .fast-problem-hd {
                      color: #4a79f6;
                    }
                    .fast-problem-bd {
                      color: #4a79f6;
                    }
                  }
                }
                &.gray {
                  color: #999999;
                  border-color: #fff;
                  cursor: default;
                  user-select: none; /*禁用页面内容选中和复制操作*/
                  .fast-problem-hd {
                    box-sizing: border-box;
                    padding-right: 60px;
                    color: #999999;
                  }
                  .fast-problem-bd {
                    color: #999999;
                  }
                }
              }
            }
          }
        }
      }
    }
    .no-doc-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      .no-doc {
        position: relative;
        margin-top: 14px;
        margin-bottom: 10px;
        padding: 10px 15px;
        color: #333333;
        font-size: 11px;
        line-height: 20px;
        background: #f0f0f3;
        //底部中间使用伪类画一个三角
        &:after {
          position: absolute;
          bottom: -5px;
          left: 50%;
          width: 0;
          height: 0;
          margin-left: -10px;
          border: 10px solid transparent;
          border-top-color: #f0f0f3;
          border-bottom: 0;
          content: '';
        }
      }
    }
  }
  .doc-question {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: start;
    width: 100%;
    height: 80px;
    .question-box {
      width: 94%;
      margin: 0 auto;
      padding: 5px 0;
      background: #f7f7f9;
      border: 1px solid #ddd;
      border-radius: 4px;
      .question-input {
        width: calc(100% - 120px);
        margin-right: 20px;
      }
    }
    .agreement-box {
      width: 100%;
      margin-top: 10px;
      margin-left: 30px;
      color: #9ea1a8;
      font-size: 12px;
      text-align: center;
    }
    .agreement-link {
      color: #3b9aff;
      cursor: pointer;
    }
  }
}
